<template>
	<view class="main" >
		<custom @showTopDailog="showTopDailog" @getContent="getContent"></custom>
		<view class="main_containers" v-if="isLoading">
			<pageTitle name="演出介绍" :navBarArr="navBarArr"></pageTitle>
			<!-- 折叠内容 -->
			<view class="collapseContainers" v-if="detailInfo.introduction">
				{{detailInfo.introduction}}
			</view>
			<view class="collapseContainers" v-html="detailInfo.detail">
				<!-- <l-collapse :accordion="true">
					<l-collapse-item  v-for="(item, index) in collapseArr" :key="index" :title="item.title" :open="currIndex==index">
						<view class="content" v-html="item.content">
							
						</view>
					</l-collapse-item>
					
				</l-collapse> -->
			</view>
		</view>
		<footerContainer></footerContainer>
		<!-- 弹窗 -->
		<topDailog v-if="topDailogStatus" @closed="topDailogStatus=false"></topDailog>

	</view>
</template>

<script>
	import {
		getItem,
		setItem,
		clearStorage
	} from '@/utils/storage.js'
	import topDailog from '@/components/common/topDailog.vue';
	import footerContainer from '@/components/common/footer.vue';
	import pageTitle from '@/components/common/pageTitle.vue';
	import lCollapse from '@/components/common/l-collapse/l-collapse.vue';
	import lCollapseItem from '@/components/common/l-collapse-item/l-collapse-item.vue';
	import {
		mapMutations
	} from 'vuex'


	export default {
		components: {
			topDailog,
			footerContainer,
			pageTitle,
			lCollapse,
			lCollapseItem
		},
		data() {
			return {
				detailInfo:{},
				goodId:'',
				isLoading:false,
				currIndex:'',
				topDailogStatus: false,
				navBarArr: [{
						id: '1',
						name: "首页"
					},
					{
						id: '2',
						name: "演唱会信息"
					}
				],
				collapseArr: [{
						id: 1,
						title: '什么是Ani summer？',
						content: '<text class="text_11">世界最大的动漫歌曲现场活动“Animelo&nbsp;Summer&nbsp;Live”（Anisama）。自&nbsp;2005&nbsp;年首次举办以来，每年仲夏时节，超过&nbsp;50&nbsp;位不同品牌的艺术家都会在埼玉超级竞技场聚集三天。不仅有动漫歌曲歌手和配音演员，还有许多来自&nbsp;J-Pop&nbsp;和摇滚界的流行艺术家也将出现。这确实是一场夏季盛事，汇聚了众多艺术家的精彩表演、只有在&nbsp;Anisama&nbsp;才能实现的合作，以及各种制作和惊喜。</text><image class = "image_5" mode="widthFix" referrerpolicy = "no-referrer" src ="/static/content1.png" /> '
					},
					{
						id: 2,
						title: 'Animelo 夏季现场 2023 -AXEL-Animelo 夏季现场 2023 -AXEL-',
						content: 'Animelo 夏季现场 2023 -AXEL-Animelo 夏季现场 2023 -AXEL-'
					},
					{
						id: 3,
						title: '活动概览',
						content: '活动概览'
					},
					{
						id: 4,
						title: '进入会场',
						content: '进入会场'
					},
				]

			}
		},
		onShow() {
            
			this.currIndex=0
			if(getItem('customObj')){
			    let objData=getItem('customObj')
				this.goodId=objData.id
			}
			this.getnewDetail()
		},
		onLoad(options) {
			let _this = this

		},
		onReady() {



		},
		methods: {
			getContent(data) {
				let that = this
				
				let objData=getItem('customObj')
				this.goodId=objData.id
				// 设置一个1000毫秒后执行的定时器
                that.getnewDetail()
			
			},
			getnewDetail(){
				// newsId:this.id
				 this.isLoading=false
				this.$http.Get(`${this.$api.getGoodInfo}/${this.goodId}`,{}, (res) => {
					console.log(res)
					let data = res
				  
				   this.detailInfo=data
				   this.navBarArr[1].name=data.name
				   this.isLoading=true
				})
			},
			showTopDailog() {
				this.topDailogStatus = true
			}
		},
	}
</script>

<style scoped lang="scss">
	.main {
		min-height: 100vh;
		position: relative;
		padding-bottom: 320rpx;
		background-image: url("../../static/bg_middle.png");
		background-size: 100% 100%;
		.collapseContainers{
			padding:20rpx 32rpx;
		}
	}
</style>